<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能团队购物清单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <h1><i class="fas fa-shopping-basket"></i> 智能购物清单</h1>
            <p class="team-name">前端开发团队 · 每周采购</p>
        </header>

        <div class="control-panel">
            <!-- 成员筛选 -->
            <div class="member-filter">
                <div class="filter-title">筛选成员:</div>
                <div class="member-tags">
                    <div class="member-tag active" data-member="all">全部</div>
                    <div class="member-tag" data-member="m1" style="--member-color: #FF6B6B;">
                        <i class="fas fa-user"></i> 张三
                    </div>
                    <div class="member-tag" data-member="m2" style="--member-color: #4ECDC4;">
                        <i class="fas fa-user"></i> 李四
                    </div>
                    <div class="member-tag" data-member="m3" style="--member-color: #45B7D1;">
                        <i class="fas fa-user"></i> 王五
                    </div>
                    <div class="member-tag" data-member="m4" style="--member-color: #A37EBA;">
                        <i class="fas fa-user"></i> 赵六
                    </div>
                </div>
            </div>

            <!-- 搜索和添加 -->
            <div class="action-bar">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="搜索物品...">
                </div>

                <div class="add-item">
                    <input type="text" id="newItem" placeholder="输入新物品...">
                    <select id="memberSelect">
                        <option value="m1">张三</option>
                        <option value="m2">李四</option>
                        <option value="m3">王五</option>
                        <option value="m4">赵六</option>
                    </select>
                    <button id="addButton">
                        <i class="fas fa-plus"></i> 添加
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats-card">
            <div class="stat-item">
                <div class="stat-value" id="totalItems">0</div>
                <div class="stat-label">总物品数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value pending" id="pendingItems">0</div>
                <div class="stat-label">待购买</div>
            </div>
            <div class="stat-item">
                <div class="stat-value purchased" id="purchasedItems">0</div>
                <div class="stat-label">已完成</div>
            </div>
        </div>

        <!-- 购物清单 -->
        <div class="shopping-list-container">
            <div class="list-header">
                <div>物品名称</div>
                <div>负责人</div>
                <div>状态</div>
                <div>操作</div>
            </div>

            <div id="itemsList">
                <!-- 空状态提示 -->
                <div class="empty-state">
                    <img src="data:image/svg+xml;base64,..." alt="空列表">
                    <h3>购物清单为空</h3>
                    <p>点击上方"添加"按钮开始记录采购物品</p>
                </div>
            </div>
        </div>

        <!-- 团队协作说明 -->
        <div class="collab-guide">
            <h3><i class="fas fa-users"></i> 团队协作指南</h3>
            <ul>
                <li><i class="fas fa-code-branch"></i> 每个成员创建自己的分支进行修改</li>
                <li><i class="fas fa-code-merge"></i> 通过Pull Request提交变更</li>
                <li><i class="fas fa-check-circle"></i> 至少需要1人审核才能合并</li>
            </ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
